<template>
  <div class="b-pay-switch inline-flex items-center">
    <span :class="{
      'b-pay-switch-block  inline-flex items-center cursor-pointer':true,
      'b-pay-switch--active':leftActiveValue === value
      }"
          @click="handleChange(leftActiveValue)">{{leftActiveText}}</span>
    <span :class="{
      'b-pay-switch-block  inline-flex items-center cursor-pointer':true,
      'b-pay-switch--active':rightActiveValue === value
      }"
          @click="handleChange(rightActiveValue)">{{rightActiveText}}</span>
  </div>
</template>

<script>
export default {
  name: 'BPaySwitch',
  props: {
    leftActiveText: {
      type: String,
      default: 'Monthly'
    },
    rightActiveText: {
      type: String,
      default: 'Annually -10%'
    },
    leftActiveValue: {
      type: [Boolean, String, Number],
      default: 'month'
    },
    rightActiveValue: {
      type: [Boolean, String, Number],
      default: 'year'
    },
    value: {
      type: [Boolean, String, Number]
    }
  },

  methods: {
    handleChange (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.b-pay-switch {
  background: #0043ce;
  height: 40px;
  padding: 4px;
  border-radius: 20px;
  &-block {
    padding: 0 16px;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    border-radius: 16px;
    color: #ffffff;
    transition: all 200ms;
  }
  &--active {
    background: #ffffff;
    color: #262626;
  }
}
</style>
